<template>
  <div class="container">
    <image
      mode="widthFix"
      class="bg"
      :src="'https://mini.jiaw.com/img/4021920211206.jpg'"
    ></image>
    <image
      mode="widthFix"
      class="bg-title"
      :src="'https://mini.jiaw.com/img/3417820211206.jpg'"
    ></image>
    <div class="content">
      <div
        class="content-item"
        v-for="item of list"
        :key="item.id"
        @click="toDetail(item)"
      >
        <image class="top-img" :src="item.banner" mode="aspectFit"></image>
        <div class="desc">
          <div class="title">
            {{ item.name }}
          </div>
          <div class="tag">
            <span v-for="itemz of item.labelList" :key="itemz.id">
              {{ itemz.name }}
            </span>
          </div>
          <div class="price">
            优惠价
            <span>¥{{ item.price }}</span>
          </div>
          <div class="origin-price">市场参考价 {{ item.originPrice }}</div>
          <text class="btn">立即抢购</text>
        </div>
      </div>
      <div class="tips">期待更多爆款商品!</div>
    </div>
  </div>
</template>

<script>
import { storeGoods } from '@/api'
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    storeGoods().then(res => {
      this.list = res.data.list
    })
  },
  methods: {
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/package/hot-cake/detail?content=' + JSON.stringify(item)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  .bg {
    width: 100%;
  }
  .bg-title {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
  .content {
    background: #e62124;
    padding: 20px 20px 40px;
    position: absolute;
    top: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .content-item {
      width: 48%;
      border-radius: 20rpx;
      margin: 20rpx 0;
      overflow: hidden;
      padding: 5px 5px 16px;
      background: #fff;
      text-align: center;
    }
    .top-img {
      height: 150px;
      width: 100%;
      border: 1px solid rgb(184, 182, 182);
      border-radius: 20rpx;
    }
    .desc {
      margin-top: 10px;
      position: relative;
      .title {
        font-size: 20px;
        height: 2em;
      }
      .tag {
        margin: 10px 0;
        span {
          margin-right: 10px;
          color: #ec94ad;
          backgroud: #ec94ad;
        }
      }
      .price {
        margin-top: 20px;
        span {
          color: #b3292c;
          font-size: 18px;
        }
      }
      .origin-price {
        text-decoration: line-through;
        font-size: 11px;
        color: rgb(130, 128, 128);
        margin-bottom: 15px;
      }
      .btn {
        position: relative;
        bottom: 0px;
        background: #b3292c;
        color: #fff;
        padding: 2px;
        border-radius: 3px;
      }
    }
    .tips {
      color: #fff;
      text-align: center;
      position: absolute;
      width: 100vw;
      left: 0;
      z-index: 999;
      bottom: 10px;
    }
  }
}
</style>
